import React, { FC } from 'react';
import { Button, Space, Tooltip, Modal } from 'antd';
import styles from './index.less';
import IconFont from '@/components/IconFont';
import { useModel } from 'umi';
import { modelName } from '../../../../index';
import useHoxModel from '../../../../useHoxModel';
import { ActionType } from '@/components/ProTable';
import classnames from 'classnames';
import ConfirmProps from '@/components/CommonModal/Confirm';
const { confirm } = Modal;

interface ToolBarProps {
  actionRef: React.MutableRefObject<ActionType | undefined>;
}

const ToolBar: FC<ToolBarProps> = ({ actionRef }) => {
  const { showModal } = useModel('useCommonModal', (model) => ({ showModal: model.showModal }));
  const {
    getFormAreaList,
    dispatch,
    selectedRowKeys,
    isShowControllerTable,
    sentDownPlanMode,
  } = useHoxModel((model) => [model.selectedRowKeys, model.isShowControllerTable]);
  return (
    <div className={styles['toolbar-wrap']}>
      <div className={styles['left']}>
        <Space>
          <Button
            className={classnames(styles['add'], isShowControllerTable && styles['active'])}
            type="primary"
            onClick={() => {
              dispatch({ isShowControllerTable: !isShowControllerTable });
            }}
          >
            <IconFont type={'iconkongzhiqi'} />
            <span>控制器</span>
          </Button>
          <Tooltip title="配置门组">
            <Button
              className={styles['add']}
              type="primary"
              onClick={() => {
                getFormAreaList();
                showModal(modelName + 'add');
              }}
            >
              <IconFont type={'iconmenzupeizhi'} />
            </Button>
          </Tooltip>

          <Button
            type="primary"
            className={styles['delete']}
            onClick={() => {
              confirm({
                ...new ConfirmProps(
                  '根据所选门设备预设的计划模板进行批量下发',
                  '本次操作为实时下发',
                ),
                async onOk() {
                  await new Promise((resolve) => {
                    selectedRowKeys.forEach(async (id, index) => {
                      await sentDownPlanMode({ id: Number(id) });
                      if (index === selectedRowKeys.length - 1) {
                        resolve();
                      }
                    });
                  });
                },
              });
            }}
            disabled={!selectedRowKeys[0]}
          >
            <IconFont type={'iconxiafa'} />
          </Button>
          {/* <Button
            type="primary"
            onClick={() => {
              confirm({
                ...new ConfirmProps('是否删除选中的所有记录?'),
                async onOk() {
                  const res = await deleteDoor({ ids: selectedRowKeys });
                  if (res?.result === 0) {
                    dispatch({ selectedRowKeys: [] });
                    actionRef.current?.reloadAndRest();
                  }
                },
              });
            }}
            disabled={!selectedRowKeys[0]}
            className={styles['delete']}
          >
            <IconFont type={'iconshanchu1'} />
          </Button> */}
        </Space>
      </div>
      <div className={styles['right']}></div>
    </div>
  );
};
export default ToolBar;
